
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form " action="" >
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="required|account_" autocomplete="off" placeholder="" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">说明</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">限制</label>
                <div class="layui-input-inline">
                    <select name="bounds" lay-filter="bounds">
                        <option value="0">不限制</option>
                        <option value="1">限制</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">访问规则</label>
                <div class="layui-input-inline">
                    <select name="rules" lay-filter="bounds">
                        <option value="0">公开访问</option>
                        <option value="1">密码访问</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="password" id="password" placeholder="请设置访问密码" autocomplete="off" style="display: none;" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="starttime" class="layui-input" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
                <i id="iconstart" class="layui-icon layui-icon-date" style="font-size: 25px;margin-left:-10px ;margin-bottom:15px"></i>
<%--                <span id="testView"></span>--%>
<%--                <div id="test2"></div>--%>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="endtime" id="endTime" lay-verify="datetime" autocomplete="off" placeholder="yyyy-MM-dd HH:mm:ss"  class="layui-input">
                    </div>
                </div>
                <i id="iconend" class="layui-icon layui-icon-date" style="font-size: 25px;margin-left:-10px;margin-bottom:5px"></i>
<%--                <i class="fa fa-pencil" style="color:black">-</i>--%>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">匿名访问</label>
                <div class="layui-input-block">
                    <input type="checkbox" checked name="anon" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF" value="0">
                </div>
            </div>

            <input  type="hidden" name="createtime" id="createtime" lay-verify="datetime" autocomplete="off" placeholder="yyyy-MM-dd HH:mm:ss"  class="layui-input">

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate,
        $=layui.jquery;

        //日期
        laydate.render({
            elem: '#startTime',
            type:'datetime',
            trigger: 'click'
        });
        laydate.render({
            elem: '#endTime',
            type:'datetime',
            trigger: 'click'
        });


        //创建一个编辑器
        // var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        // form.verify({
        //     title: function (value) {
        //         if (value.length < 5) {
        //             return '标题至少得5个字符啊';
        //         }
        //     }
        //     , pass: [
        //         /^[\S]{6,15}$/
        //         , '密码须6到15位，且不能出现空格'
        //     ],
        //     account_: [
        //         /^[\S]{5,15}$/
        //         , '用户名须5到15位，且不能出现空格'
        //     ]
        //     , content: function (value) {
        //         layedit.sync(editIndex);
        //     }
        // });

        //监听指定开关
        // form.on('switch(switchTest)', function (data) {
        //     layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
        //         offset: '6px'
        //     });
        //     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        // });

        //监听提交
        form.on('submit(demo1)', function (data) {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })

            console.log(data);
            console.log(data.field);
            $.ajax({
                url:"create",
                method:"POST",
                contentType:"application/json",
                dataType:"json",
                data:JSON.stringify(data.field),
                success:function (data) {
                    if(data.code==0){
                        layer.msg("添加成功",{time:1000},function () {
                            window.parent.location.reload();
                        });

                    }else {
                        layer.msg("添加失败",{time:1000},function () {
                            layer.close(layer.index);
                        });
                    }
                }
            });
            return false;
        });

        form.on('select(bounds)',function (data) {
            if(data.value=="1"){
                $('#password').show();
            }else{
                $('#password').hide();
            }
        });
        laydate.render({
            elem: '#createtime',// input里时间的Id
            value: new Date(),
            type:'datetime',
            done: function (value, date) {
            }
        });
        // laydate.render({
        //     elem: '#test2'
        //     ,position: 'static'
        //     ,change: function(value, date){ //监听日期被切换
        //         lay('#testView').html(value);
        //     }
        // });

        // lay('#iconstart').on('click', function(e){ //假设 test1 是一个按钮
        //     laydate.render({
        //         elem: '#test2'
        //         ,show: true //直接显示
        //         ,closeStop: '#test1',//这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
        //         change: function(value, date){ //监听日期被切换
        //             lay('#testView').html(value);
        //         }
        //     });
        // });


    });
</script>

</body>
</html>
